Anpassade Mätvärden med Frontend Performance Observer: Applikationsspecifik Mätning

I webbutvecklingens värld är det av största vikt att säkerställa optimal frontend-prestanda. Även om webbläsare erbjuder en rad prestandamått, är de ofta otillräckliga när det gäller att fånga applikationsspecifikt beteende. Det är här Frontend Performance Observer API och förmågan att definiera anpassade mätvärden blir ovärderliga. Denna artikel guidar dig genom processen att använda Performance Observer för att spåra skräddarsydda mätvärden, vilket ger en anpassad bild av din applikations prestandalandskap.

Förstå Behovet av Anpassade Mätvärden

Standardiserade prestandamått i webbläsare, såsom First Contentful Paint (FCP), Largest Contentful Paint (LCP) och Time to Interactive (TTI), ger en allmän översikt över sidans laddning och responsivitet. Dessa mätvärden återspeglar dock ofta inte användarupplevelsen i just din applikation. Tänk på följande scenarier:

• E-handelsapplikation: Tiden det tar att lägga en vara i kundvagnen eller slutföra en utcheckningsprocess.
• Sociala medieplattform: Latensen vid laddning av användarflöden eller publicering av uppdateringar.
• Finansiell instrumentpanel: Tiden som krävs för att beräkna och visa komplex finansiell data.
• Kartapplikation: Fördröjningen vid laddning av kartbrickor eller rendering av geografisk data.

Dessa applikationsspecifika åtgärder är kritiska för användarupplevelsen men fångas inte direkt av standardiserade prestandamått. Anpassade mätvärden överbryggar detta gap och låter dig övervaka prestandan för kritiska funktioner och få en djupare förståelse för användarbeteende.

Introduktion till Performance Observer API

Performance Observer API tillhandahåller en mekanism för att observera och samla in prestandamått när de inträffar i webbläsaren. Det låter dig prenumerera på specifika typer av prestandainträden (performance entry types), såsom `paint`, `resource`, `navigation`, och, viktigast av allt, `measure` och `mark`. Detta händelsedrivna tillvägagångssätt gör att du kan reagera på prestandahändelser i realtid och samla in data för analys.

Kärnkomponenterna i Performance Observer API är:

• `PerformanceObserver`-konstruktorn: Skapar en ny PerformanceObserver-instans.
• `observe()`-metoden: Specificerar vilka typer av prestandainträden som ska observeras.
• `disconnect()`-metoden: Stoppar observatören från att lyssna efter prestandainträden.
• `takeRecords()`-metoden: Returnerar alla prestandainträden som har buffrats sedan det senaste anropet.

Definiera Anpassade Mätvärden med `mark` och `measure`

API:erna `mark` och `measure` är grundläggande för att skapa anpassade prestandamått. Så här fungerar de:

• `performance.mark(markName)`: Skapar en tidsstämplad markör i webbläsarens prestandatidslinje. Du använder `mark` för att indikera starten och slutet på en specifik händelse du vill mäta.
• `performance.measure(measureName, startMark, endMark)`: Beräknar varaktigheten mellan två markörer och skapar ett prestandainträde av typen `measure`. `measureName` är en unik identifierare för ditt anpassade mätvärde.

Låt oss illustrera detta med ett exempel. Antag att du vill mäta tiden det tar för en specifik komponent att renderas efter en användarinteraktion.

            
// Börja mäta renderingsprocessen
performance.mark('componentRenderStart');

// ... (Logik för komponentrendering här) ...

// Sluta mäta renderingsprocessen
performance.mark('componentRenderEnd');

// Skapa ett mätvärde för att beräkna varaktigheten
performance.measure('componentRenderTime', 'componentRenderStart', 'componentRenderEnd');

            

              
                Copy
              
            
          

Implementera en Performance Observer för Anpassade Mätvärden

Låt oss nu skapa en Performance Observer för att lyssna efter `measure`-inträden och bearbeta datan från de anpassade mätvärdena.

            
const observer = new PerformanceObserver((list) => {
  list.getEntriesByType('measure').forEach((entry) => {
    console.log(`Anpassat mätvärde: ${entry.name} - Varaktighet: ${entry.duration}ms`);
    // I ett verkligt scenario skulle du skicka denna data till din analysplattform
    // Exempel:
    // trackCustomMetric(entry.name, entry.duration);
  });
});

observer.observe({ entryTypes: ['measure'] });

            

              
                Copy
              
            
          

Detta kodstycke skapar en Performance Observer som lyssnar efter `measure`-inträden. När ett `measure`-inträde skapas (genom `performance.measure`), exekveras observatörens callback-funktion. Callback-funktionen itererar genom de insamlade inträdena, loggar mätvärdets namn och varaktighet till konsolen, och, idealt sett, skickar datan till en analysplattform för vidare analys.

Praktiska Exempel: Anpassade Mätvärden i Praktiken

Låt oss utforska flera praktiska exempel på hur du kan använda anpassade mätvärden för att övervaka specifika aspekter av din applikations prestanda.

1. Mäta API-svarstider

Att spåra tiden det tar att få svar från dina backend-API:er är avgörande för att identifiera potentiella flaskhalsar. Så här kan du mäta API-svarstid:

            
async function fetchData() {
  performance.mark('apiCallStart');
  const response = await fetch('/api/data');
  performance.mark('apiCallEnd');
  performance.measure('apiResponseTime', 'apiCallStart', 'apiCallEnd');
  return response.json();
}

            

              
                Copy
              
            
          

Detta kodstycke mäter tiden det tar att hämta data från `/api/data`-slutpunkten. Mätvärdet `apiResponseTime` fångar hela varaktigheten för API-anropet, från starten av begäran till mottagandet av svaret.

2. Spåra Bilders Laddningstid

Bilder är ofta en betydande faktor för sidladdningsprestanda. Att mäta tiden det tar för bilder att laddas kan hjälpa dig att identifiera överdimensionerade bilder eller långsamma CDN:er.

            
const image = new Image();
image.onload = () => {
  performance.mark('imageLoadEnd');
  performance.measure('imageLoadTime', 'imageLoadStart', 'imageLoadEnd');
};
performance.mark('imageLoadStart');
image.src = 'https://example.com/image.jpg';

            

              
                Copy
              
            
          

Detta kodstycke mäter tiden det tar för en bild att laddas från den angivna URL:en. Mätvärdet `imageLoadTime` fångar varaktigheten från starten av bildbegäran till slutförandet av bildladdningen.

3. Övervaka Exekveringstid för Tredjepartsskript

Tredjepartsskript kan ofta ha en betydande inverkan på frontend-prestanda. Att mäta deras exekveringstid kan hjälpa dig att identifiera problematiska skript och optimera deras laddning eller exekvering.

            
// Förutsatt att tredjepartsskriptet har en global funktion som heter 'thirdPartyScript'

performance.mark('thirdPartyScriptStart');
thirdPartyScript();
performance.mark('thirdPartyScriptEnd');
performance.measure('thirdPartyScriptExecutionTime', 'thirdPartyScriptStart', 'thirdPartyScriptEnd');

            

              
                Copy
              
            
          

Detta kodstycke mäter exekveringstiden för ett hypotetiskt tredjepartsskript. Mätvärdet `thirdPartyScriptExecutionTime` fångar varaktigheten av skriptets exekvering.

4. Mäta Time to Interactive (TTI) för Specifika Komponenter

Även om TTI är ett standardmått kan du anpassa det för att mäta tiden det tar för specifika komponenter att bli interaktiva. Detta gör att du kan peka ut vilka komponenter som bidrar mest till den totala TTI:n.

            
// Efter att din komponent är fullständigt renderad och interaktiv
performance.mark('componentInteractive');
performance.measure('componentTTI', 'componentRenderStart', 'componentInteractive');

            

              
                Copy
              
            
          

Detta exempel förutsätter att `componentRenderStart` definierades tidigare. Det mäter tiden från det att komponenten började renderas till det att den är fullt interaktiv.

Avancerade Tekniker och Överväganden

Utöver grunderna, här är några avancerade tekniker och överväganden för att använda Performance Observer och anpassade mätvärden effektivt:

1. Använda User Timing API för Komplexa Scenarier

För mer komplexa scenarier kan du behöva skapa flera markörer och mätvärden för att spåra olika faser av en händelse. User Timing API ger ett flexibelt sätt att hantera dessa markörer och beräkningar.

2. Utnyttja Long Tasks API

Long Tasks API kan hjälpa till att identifiera uppgifter som blockerar huvudtråden under längre perioder, vilket leder till en dålig användarupplevelse. Du kan kombinera detta med anpassade mätvärden för att korrelera långa uppgifter med specifika applikationsåtgärder.

3. `buffered`-flaggan och Sent Laddade Observatörer

Om du initierar din Performance Observer efter att vissa prestandahändelser redan har inträffat kan du använda `buffered`-flaggan för att hämta dessa händelser. Till exempel:

            
const observer = new PerformanceObserver((list) => { /* ... */ });
observer.observe({ entryTypes: ['measure'], buffered: true });

            

              
                Copy
              
            
          

4. Throttling och Debouncing

I högfrekventa scenarier, överväg att använda "throttling" eller "debouncing" för din mätvärdesinsamling för att undvika prestandakostnader. Om du till exempel spårar musrörelser kanske du bara samlar in data var 100:e ms.

5. Datainsamling och Analys

Den råa prestandadatan som samlas in av Performance Observer måste aggregeras och analyseras för att ge meningsfulla insikter. Detta innebär vanligtvis att skicka datan till en analysplattform, som Google Analytics, New Relic eller en egenbyggd lösning. Se till att din analysplattform kan hantera anpassade mätvärden och tillhandahålla de nödvändiga rapporteringsfunktionerna.

6. Real User Monitoring (RUM)

För att få en sann bild av din applikations prestanda, implementera Real User Monitoring (RUM). RUM samlar in prestandadata från riktiga användare under verkliga förhållanden, vilket ger värdefulla insikter i hur din applikation presterar för olika användare och enheter. Anpassade mätvärden är en väsentlig del av en omfattande RUM-strategi.

7. Säkerhetsaspekter

Var medveten om säkerheten när du samlar in och överför prestandadata. Undvik att samla in känslig användarinformation och se till att data överförs säkert (t.ex. med HTTPS).

Exempel: Mäta Time to First Byte (TTFB) med Resource Timing API

TTFB är tiden det tar för webbläsaren att ta emot den första byten data från servern. Även om det inte strikt är ett anpassat mätvärde definierat med `mark` och `measure`, är det en värdefull prestandaindikator och kan nås via Resource Timing API och observeras med en Performance Observer.

            
const ttfbObserver = new PerformanceObserver((list) => {
  list.getEntriesByType('resource').forEach((entry) => {
    if (entry.name === window.location.href) { // Kontrollera om det är huvuddokumentet
      const ttfb = entry.responseStart - entry.startTime;
      console.log(`TTFB: ${ttfb}ms`);
      // Skicka ttfb till din analysplattform
    }
  });
});

ttfbObserver.observe({ type: 'resource', buffered: true });

            

              
                Copy
              
            
          

Kompatibilitet Mellan Webbläsare

Performance Observer API stöds brett av moderna webbläsare. Det är dock alltid en god praxis att kontrollera webbläsarkompatibilitet och tillhandahålla reservmekanismer för äldre webbläsare. Du kan använda en polyfill eller en enklare mätteknik för webbläsare som inte stöder Performance Observer API.

            
if ('PerformanceObserver' in window) {
  // Använd Performance Observer API
  const observer = new PerformanceObserver((list) => { /* ... */ });
  observer.observe({ entryTypes: ['measure'] });
} else {
  // Använd en reservmekanism (t.ex. Date.now() för enkla tidsmätningar)
  console.warn('PerformanceObserver API stöds inte i denna webbläsare.');
}

            

              
                Copy
              
            
          

Bästa Praxis för att Använda Anpassade Mätvärden

• Definiera tydliga mål: Vilka specifika prestandaaspekter vill du övervaka?
• Välj meningsfulla mätvärdesnamn: Använd beskrivande och konsekventa namn för dina anpassade mätvärden.
• Dokumentera dina mätvärden: Dokumentera tydligt syftet och beräkningen av varje anpassat mätvärde.
• Sätt prestandabudgetar: Definiera acceptabla prestandatrösklar för dina anpassade mätvärden.
• Automatisera datainsamling och analys: Integrera insamlingen av anpassade mätvärden i din byggprocess och analyspipeline.
• Granska och förfina dina mätvärden regelbundet: I takt med att din applikation utvecklas kan dina behov av prestandaövervakning förändras.

Slutsats

Frontend-prestanda är en kontinuerlig resa, inte en destination. Genom att utnyttja Frontend Performance Observer API och definiera anpassade mätvärden kan du få en djupare förståelse för din applikations prestanda och identifiera områden för förbättring. Detta skräddarsydda tillvägagångssätt för prestandaövervakning ger dig möjlighet att optimera användarupplevelsen och leverera en snabbare, mer responsiv webbapplikation. Kom ihåg att konsekvent övervaka, analysera och förfina dina mätvärden för att ligga steget före och säkerställa att din applikation presterar optimalt för alla användare, oavsett deras plats eller enhet.

Denna artikel gav en omfattande översikt över anpassade mätvärden med hjälp av Performance Observer API. Det är avgörande att anpassa dessa tekniker till dina specifika applikationsbehov och kontinuerligt övervaka och analysera datan för att fatta välgrundade beslut om prestandaoptimering.

Vidare läsning:

• PerformanceObserver API - MDN Web Docs
• performance.mark() - MDN Web Docs
• performance.measure() - MDN Web Docs